<template>
  <div class="Con">
    <div class="Con-H">
      <p>教 师 登 录</p>
    </div>
    <div class="Con-Title">
      <!--注意事项-->
      <p><span style="color: crimson">*</span> 注意事项</p>
      <p><span>1.教师密码和教师工号一致。</span></p>
      <p>
        <span>2.教师需在学期末前登录系统，对没有确认的课程进行再次确认。</span>
      </p>
    </div>
    <div class="Con-C">
      <div class="Con-C-C">
        <el-input
          class="but1"
          placeholder="请输入工号"
          prefix-icon="el-icon-s-custom"
          v-model="t_no"
        >
        </el-input>

        <el-input
          class="but2"
          type="password"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          v-model="t_password"
        >
        </el-input>

        <el-button
          type="primary"
          icon="el-icon-s-promotion"
          class="but3"
          @click="login()"
          >登 录</el-button
        >
      </div>
      <div class="Con-C-B">
        <p>广州城市理工学院计算机实验中心</p>
      </div>
    </div>
  </div>
</template>

<script>
import { axios1 } from "../../network";
import Qs from "qs";
import store from "../../store/index.js";
export default {
  data() {
    return {
      t_no: "",
      t_password: "",
    };
  },
  methods: {
    login() {
      if (this.t_no === "" || this.t_password === "") {
        this.$message({
          message: "输入框不可以为空！！",
          type: "warning",
          duration: 1200,
        });
      } else {
        this.teacherLogin();
      }
    },

    teacherLogin() {
      let myData = {
        account: this.t_no,
        password: this.t_password,
      };
      axios1({
        url: "teacherSystem/login",
        method: "post",
        data: Qs.stringify(myData),
      })
        .then((res) => {
          //console.log(res)
          if (res.data.resultCode == "200") {
            this.$message({
              message: res.data.msg,
              type: "success",
              duration: 1200,
            });
            //登录成功！保存工号和姓名在Cookie
            //this.$store.commit('setToken',res.data.data.token)
            this.$store.commit("setTeacherNo", res.data.data.tid); //存工号
            this.$store.commit("setTeacherName", res.data.data.tname); //存工号
            //跳转页面
            this.$router.push("/teachershowno").catch((err) => {});
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
  },
};
</script>

<style scoped>
.Con {
  width: 70%;
  height: 100vh;
  position: relative;
  margin: auto;
  max-width: 1000px;
}
.Con-H {
  width: 96%;
  margin: auto;
  height: 10%;
  box-shadow: 1px 1px 5px rgb(199, 198, 198);
  display: flex;
  align-items: center;
  background-color: #f0eeee;
}
.Con-H p {
  font-size: 26px;
  font-weight: 800;
  margin: auto;
  color: rgb(8, 10, 12);
  font-family: "宋体";
  color: #409eff;
}
.Con-Title {
  width: 96%;
  height: 10%;
  box-shadow: 1px 1px 5px rgb(192, 191, 191);
  margin: auto;
  margin-top: 15px;
  background-color: #f7ebeb;
}
.Con-Title p {
  padding: 0px;
  margin: 0px;
  font-family: "宋体";
  padding-left: 20px;
  padding-top: 5px;
  font-size: 15px;
  color: #89898a;
}
.Con-C {
  width: 100%;
  height: 70%;

  overflow: hidden;
}
.but1 {
  width: 84%;
  margin-left: 8%;
  margin-top: 10%;
  font-size: 16px;
}
.but2 {
  width: 84%;
  margin-left: 8%;
  margin-top: 10%;
  font-size: 16px;
}
.but3 {
  width: 84%;
  margin-left: 8%;
  margin-top: 10%;
  font-size: 16px;
}
.Con-C-C {
  width: 96%;
  margin: auto;
  margin-top: 35px;
  box-shadow: 1px 1px 5px rgb(173, 173, 173);
  padding-bottom: 15%;
}
.Con-C-B {
  width: 100%;
  margin: auto;
  height: 5%;
  border-top: 1px solid rgb(200, 236, 247);
  margin-top: 10%;
  position: absolute;
  bottom: 0px;
  margin: auto;
  font-family: "宋体";
}
.Con-C-B p {
  text-align: center;
  padding: 0px;
  margin: 0px;
  color: #268cf1;
  font-weight: 700;
  font-size: 14px;
  padding-top: 3px;
}

@media screen and (max-width: 768px) {
  .Con {
    width: 100%;
  }
  .Con-H p {
    font-size: 18px;
  }
  .but1 {
    width: 92%;
    margin-left: 4%;
    font-size: 14px;
  }
  .but2 {
    width: 92%;
    margin-left: 4%;
    font-size: 14px;
  }
  .but3 {
    width: 92%;
    margin-left: 4%;
    font-size: 14px;
  }
  .Con-Title p {
    font-size: 6px;
    padding-top: 2px;
    padding-left: 1px;
  }
  .Con-C-B p {
    font-size: 8px;
  }
}
</style>
